<template>
	<view class="content-card ss-flex-col">
		<view class="top-box ss-flex-row ss-row-left ss-col-center ss-m-b-48">团队总人数：{{total}}个</view>
		<view class="item ss-flex-row ss-row-between ss-col-center" v-if="bd>0">
			<view class="label">商务BD</view>
			<view class="amount">{{bd}}个</view>
		</view>
		<view class="item ss-flex-row ss-row-between ss-col-center ss-m-t-20" v-if="bdm>0">
			<view class="label">商务经理BDM</view>
			<view class="amounnt">{{bdm}}个</view>
		</view>
		<view class="item ss-flex-row ss-row-between ss-col-center ss-m-t-20" v-if="street>0">
			<view class="label">商务服务中心</view>
			<view class="amounnt">{{street}}个</view>
		</view>
		<view class="item ss-flex-row ss-row-between ss-col-center ss-m-t-20" v-if="district>0">
			<view class="label">区县代理</view>
			<view class="amounnt">{{district}}个</view>
		</view>
		<view class="item ss-flex-row ss-row-between ss-col-center ss-m-t-20" v-if="city>0">
			<view class="label">地市代理</view>
			<view class="amounnt">{{city}}个</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	})
	
	const total = computed(()=>{
		if(props.data&&props.data.children){
			return props.data.children.total;
		}else{
			return 0;
		}
		
	})
	
	const district = computed(() => {
		if (props.data && props.data['区县服务商']) {
			return props.data['区县服务商'].total;
		} else {
			return 0;
		}
	});
	
	const city = computed(() => {
		if (props.data && props.data['城市服务商']) {
			return props.data['城市服务商'].total;
		} else {
			return 0;
		}
	});
	
	
	const bd = computed(() => {
		if (props.data && props.data['DB']) {
			return props.data['DB'].total;
		} else {
			return 0;
		}
	});
	
	const bdm = computed(() => {
		if (props.data && props.data['BDM']) {
			return props.data['BDM'].total;
		} else {
			return 0;
		}
	});
	
	const street = computed(() => {
		if (props.data && props.data['街道服务商']) {
			return props.data['街道服务商'].total;
		} else {
			return 0;
		}
	});
	
	onMounted(() => {
		console.log('districtAmount:', props.data)
	})
</script>

<style lang="scss" scoped>
	.content-card{
		width:calc(100% - 13rpx - 8rpx - 30rpx - 30rpx);
		margin-right: 13rpx;
		margin-left: 8rpx;
		margin-top:24rpx;
		
		padding:21rpx 30rpx 20rpx 28rpx;
		border-radius: 20rpx;
		background: #F4F4F4;
		.top-box{
			height: 43rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 550;
			line-height:43rpx;
			letter-spacing: normal;
			color: #000000;
		}
		.item{
			.label{
				height: 43rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: normal;
				line-height:43rpx;
				letter-spacing: 1rpx;
				color: #000000;
			}
			.amout{
				height: 43rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #000000;
			}
		}
	}
</style>